<template>
  <div id="comments">
    <el-form v-if="!cantComments" :model="commentsForm" :rules="commentsRules" ref="commentsForm">
      <div class="shop-grade" v-if="isFirstComment">
        <h3><i class="el-icon-warning"></i>请给店铺评分</h3>
        <div class="shop-grade-item">描述相符：<el-rate v-model="commentsForm.description_score" :colors="rateColors" score-template="{value}分" text-color="#666" show-score></el-rate></div>
        <div class="shop-grade-item">服务态度：<el-rate v-model="commentsForm.service_score" :colors="rateColors" score-template="{value}分" text-color="#666" show-score></el-rate></div>
        <div class="shop-grade-item">物流服务：<el-rate v-model="commentsForm.delivery_score" :colors="rateColors" score-template="{value}分" text-color="#666" show-score></el-rate></div>
      </div>
      <div class="comments-goods-box">
        <div v-for="(comment, index) in commentsForm.comments" :key="index" class="comments-item">
          <!-- 商品展示 -->
          <router-link v-if="isFirstComment" :to="'/goods/' + skulist[index].goods_id + '?sku_id=' + skulist[index].sku_id" target="_blank" class="comments-goods">
            <div class="goods-image"><img :src="skulist[index].goods_image" :alt="skulist[index].name"></div>
            <div class="goods-name">
              <span v-html="skulist[index].name">{{ skulist[index].name }}</span>
              <p class="sku-spec">{{ skulist[index] | formatterSkuSpec }}</p>
            </div>
          </router-link>
          <router-link v-else :to="'/goods/' + goodsCommentsInfo[index].goods_id + '?sku_id=' + goodsCommentsInfo[index].sku_id" target="_blank" class="comments-goods">
            <div class="goods-image">
              <img :src="goodsCommentsInfo[index].goods_img" :alt="goodsCommentsInfo[index].goods_name"></div>
            <div class="goods-name">
              <span>{{ goodsCommentsInfo[index].goods_name }}</span>
              <p class="sku-spec">{{ goodsCommentsInfo[index] | formatterSkuSpec }}</p>
            </div>
          </router-link>
          <!-- 评价 -->
          <div class="comments-content">
            <div class="comments-grade" v-if="isFirstComment">评分：
              <el-radio-group
                v-model="comment.grade"
                @change="(value) => { commentsRules.comments[index].content[0].required = value !== 'good' }"
              >
                <el-radio label="good">好评</el-radio>
                <el-radio label="neutral">中评</el-radio>
                <el-radio label="bad">差评</el-radio>
              </el-radio-group>
            </div>
            <ul class="comments_score" v-else>
              <template v-if="comment.$$goods_comment">
                <li>初评日期：{{ comment.$$goods_comment.create_time | unixToDate }}</li>
                <li>
                  初评评分：{{ comment.$$goods_comment.grade === 'good' ? '好评' : comment.$$goods_comment.grade === 'neutral' ? '中评' : comment.$$goods_comment.grade === 'bad' ? '差评' : '' }}
                </li>
                <li>初评内容：{{ comment.$$goods_comment.content }}</li>
                <li v-if="comment.$$goods_comment.images">
                  <span style="float:left;">初评图片：</span>
                  <viewer :images="comment.$$goods_comment.images">
                    <a
                      :key="index"
                      v-for="(img, index) in comment.$$goods_comment.images"
                    >
                      <img class="comments-images" :src="img" alt="">
                    </a>
                  </viewer>
                </li>
                <li>
                  初评审核状态：
                  <span v-if="comment.$$goods_comment.audit_status === 'WAIT_AUDIT'">您的初评待审核，不能进行追评</span>
                  <span v-if="comment.$$goods_comment.audit_status === 'REFUSE_AUDIT'">您的初评审核未通过，不能进行追评</span>
                  <span v-if="comment.$$goods_comment.audit_status === 'PASS_AUDIT'">您的初评审核通过</span>
                </li>
              </template>
            </ul>
            <div class="comments-input" v-if="isFirstComment || comment.$$goods_comment.audit_status === 'PASS_AUDIT'">
              <el-form-item :prop="'comments.' + index + '.content'" label="">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 10 }"
                  :maxlength="300"
                  placeholder="请在此处输入您的评论"
                  v-model="comment.content">
                </el-input>
              </el-form-item>
            </div>
            <div :class="['comments-images', comment.images.length >= 5 && 'limit']" v-if="isFirstComment || comment.$$goods_comment.audit_status === 'PASS_AUDIT'">
              <el-upload
                :action="MixinUploadApi"
                :headers="MixinAccessToken"
                list-type="picture-card"
                multiple
                :on-exceed="() => { $message.error('超过最大可上传数！') }"
                :limit="5"
                :on-change="(file,fileList) => { comment.images = fileList }"
                :on-remove="(file, fileList) => { comment.images = fileList }"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <p v-if="isFirstComment || comment.$$goods_comment.audit_status === 'PASS_AUDIT'">
              您收到的商品是什么样的呢？晒个照片吧（最多可上传5张照片）</p>
          </div>
        </div>
      </div>
      <div class="comments-btn-box">
        <el-button type="danger" v-if="button_show" @click="submitForm">发表评论</el-button>
      </div>
    </el-form>
    <div v-else class="cant-comments">
      <h3><i class="el-icon-warning"></i>该订单不能评论！</h3>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as API_Order from '@/api/order'
import * as API_Members from '@/api/members'
import Viewer from 'v-viewer'
import { Rate, RadioGroup, Radio, Upload } from 'element-ui'
import 'viewerjs/dist/viewer.css'

Vue.use(Rate).use(RadioGroup).use(Radio).use(Upload).use(Viewer)

export default {
  name: 'comments',
  head() {
    return {
      title: `评价商品-${this.site.title}`
    }
  },
  data() {
    return {
      order_sn: this.$route.query.order_sn,
      append_comment: this.$route.query.append_comment,
      skulist: '',
      commentsForm: {},
      commentsRules: {
        comments: []
      },
      // 评分颜色
      rateColors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      // 不能评论【已评论过】
      cantComments: false,
      // 是否为初评 默认为true ==> 初评
      isFirstComment: true,
      // 商品评论信息
      goodsCommentsInfo: {},
      // 是否可以提交
      isSubmitForm: true
    }
  },
  computed: {
    button_show() {
      let { comments = [] } = this.commentsForm
      if (this.isFirstComment) return true
      return comments.some(item => item.$$goods_comment.audit_status === 'PASS_AUDIT')
    }
  },
  mounted() {
    let append_comment = this.append_comment
    if (append_comment === 'review') {
      this.isFirstComment = false
    }
    let commentResult
    const sku_id = this.$route.query.sku_id
    API_Order.getOrderDetail(this.order_sn).then(async response => {
      this.skulist = commentResult = response.order_sku_list
      if (append_comment === 'review') {
        this.isFirstComment = false
        this.goodsCommentsInfo = commentResult = await API_Members.getGoodsFirstComments({
          order_sn: this.order_sn,
          sku_id
        })
      }
      this.commentsForm = {
        order_sn: this.order_sn,
        delivery_score: 5,
        description_score: 5,
        service_score: 5,
        comments: commentResult.map((item, index) => {
          this.commentsRules.comments[index] = {}
          this.commentsRules.comments[index].content = [{
            required: false,
            message: '可以告诉我们您遇到了什么问题吗？',
            trigger: 'blur'
          }]
          return {
            $$goods_comment: item,
            sku_id: item.sku_id,
            content: '',
            grade: 'good',
            images: []
          }
        })
      }
    })
  },
  methods: {
    submitForm() {
      this.$refs['commentsForm'].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.commentsForm))
          // 默认好评
          params.comments.forEach(key => {
            if (!key.grade) key.grade = 'good'
            if (!this.isFirstComment && !key.comment_id) key.comment_id = key.$$goods_comment.comment_id
            if (key.images.some(item => item.status !== 'success')) {
              this.isSubmitForm = false
            } else {
              this.isSubmitForm = true
            }
          })
          if (!this.isSubmitForm) {
            this.$message.error('图片正在上传中，请稍后再试！')
            return false
          }
          // 追评校验
          if (!this.isFirstComment) {
            params.comments = params.comments.filter(key => key.$$goods_comment.audit_status === 'PASS_AUDIT')
            const result = params.comments.some(key => !key.content)
            if (result) {
              this.$message.error('请填写追评内容！')
              return false
            }
          }
          params.comments.forEach(key => {
            key.images = key.images.map(item => item.response.url)
          })
          API_Members[this.isFirstComment ? 'commentsOrder' : 'AppendCommentsOrder'](this.isFirstComment ? params : params.comments).then(() => {
            this.$message.success('发表成功')
            this.$router.replace({ path: '/member/my-comments' })
          })
        } else {
          this.$message.error('表单填写有误，请检查！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-grade {
  overflow: hidden;
  margin-bottom: 20px;
  h3 {
    font-size: 12px;
    color: #fc982c;
    height: 30px;
    line-height: 30px;
    i {
      margin-right: 5px;
      font-size: 14px
    }
  }
  .shop-grade-item {
    display: inline-block;
    margin-right: 20px;
    .el-rate {
      position: relative;
      top: -2px;
      display: inline-block;
      .el-rate__text {
        font-size: 12px;
      }
    }
  }
}
.comments-goods-box {
  overflow: hidden;
  .comments-item {
    width: 100%;
    border-top: 1px solid #e4e4e4;
    overflow: hidden;
    ::before {
      display: block;
      clear: both;
    }
  }
  .comments-goods {
    display: block;
    float: left;
    width: 219px;
    padding: 30px 50px;
  }
  .goods-image {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%
    }
  }
  .goods-name {
    text-align: center;
  }
  .comments-content {
    float: left;
    width: 630px;
    min-height: 300px;
    padding-left: 40px;
    border-left: 1px solid #e4e4e4;
  }
  .comments-grade {
    margin: 20px 0;
  }
  .comments_score {
    margin: 12px 0;
    li {
      line-height: 26px;
      color: #999;
      .comments-images {
        width: 75px;
        height: 75px;
        object-fit: contain;
      }
    }
  }
  .comments-input /deep/ .el-form-item.is-success .el-textarea__inner {
    border-color: #dcdfe6;
  }
  .comments-images {
    width: 630px;
    height: 113px;
    overflow: hidden;
    &.limit /deep/ .el-upload--picture-card {
      display: none !important;
    }
    /deep/ {
      .el-upload-list__item, .el-upload--picture-card, .el-progress {
        width: 100px;
        height: 100px;
      }
      .el-upload--picture-card, .el-progress {
        line-height: 100px;
      }
      .el-upload-list__item-status-label i {
        margin-top: 6px !important;
      }
      .el-progress-circle {
        width: 75px !important;
        height: 75px !important;
        margin: 12.5px !important;
      }
      .el-progress__text {
        font-size: 14px !important;
      }
      .el-icon-plus {
        line-height: inherit !important;
      }
    }
  }
}
.comments-btn-box {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  .el-button {
    width: 175px;
    background-color: #df3033;
    &:hover {
      background-color: #be2629
    }
  }
}
.cant-comments {
  width: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 18px;
  color: #fc982c;
  i {
    margin-right: 10px
  }
}
</style>
